<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/fragment::top">

</head>

<body>
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
    <!--左侧导航-->
    <div th:replace="common/fragment::leftmenu"></div>
    <!--End 左侧导航-->

    <!--头部信息-->
    <div th:replace="common/fragment::header"></div>
    <!--End 头部信息-->

    <!--页面主要内容-->
    <main class="lyear-layout-content">

      <div class="container-fluid">

        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="card-header"><h4>设置权限</h4></div>
              <div class="card-body">

                <form action="#!" method="post">
                  <div class="input-group m-b-10">
                    <label class="input-group-addon " for="add-new-rolename">角色名称</label>
                    <input class="form-control " id="add-new-rolename" name="role-input"
                           placeholder="角色名称" type="text">
                  </div>
                  <div class="input-group m-b-10">
                    <label class="input-group-addon">角色状态</label>
                    <div class="col-xs-12">
                      <label class="radio-inline" for="example-inline-radio1">
                        <input id="example-inline-radio1" name="rolePOstatus" type="radio"
                               value="1" checked="checked">
                        启用
                      </label>
                      <label class="radio-inline" for="example-inline-radio2">
                        <input id="example-inline-radio2" name="rolePOstatus" type="radio"
                               value="-1">
                        锁定
                      </label>
                    </div>
                  </div>
                  <div class="input-group m-b-10">
                    <label class="input-group-addon " for="role-comment">备注</label>
                    <input class="form-control " id="role-comment" name="role-comment"
                           placeholder=".....备注....." type="text">
                  </div>
                  <div class="table-responsive">
                    <table class="table table-striped">
                      <thead>
                      <tr>
                        <th>
                          <label class="lyear-checkbox checkbox-primary">
                            <input id="check-all" name="checkbox" type="checkbox">
                            <span> 全选</span>
                          </label>
                        </th>
                      </tr>
                      </thead>
                      <tbody>
                      <th:block th:each="menu:${menuList}" th:if="${menuList} != null">
                        <tr th:if="${menu} != null">
                          <td class="p-l-20">
                            <label class="lyear-checkbox checkbox-primary">
                              <input name="rules[]"
                                     th:class="|checkbox-parent checkbox-child mdi ${menu.icon}|"
                                     th:dataid="|id-${menu.id}|" th:value="${menu.id}"
                                     type="checkbox">
                              <span th:text="${menu.menuname}"> 配置管理</span>
                            </label>

                          </td>
                        </tr>
                        <tr th:if="${menu.child.size()} >= 1">
                          <td class="p-l-40 ">
                            <label class="lyear-checkbox checkbox-primary checkbox-inline"
                                   th:each="child:${menu.child}" th:with="parentid=${menu.id}">
                              <input name="rules[]"
                                     th:class="checkbox-child "
                                     th:dataid="|id-${parentid}-${child.id}|"
                                     th:value="${child.id}" type="checkbox">
                              <span th:text="${child.menuname}"> 添加配置</span>
                            </label>
                          </td>
                        </tr>
                      </th:block>

                      </tbody>
                    </table>
                  </div>
                  <div class="form-group col-md-12">
                    <button
                        class="btn btn-primary ajax-post"
                        id="add-role-btn"
                        target-form="add-form"
                        type="button">确 定
                    </button>
                    <button
                        class="btn btn-default"
                        onclick="history.back(-1);return false;"
                        type="button">返 回
                    </button>
                  </div>
                </form>

              </div>
            </div>
          </div>

        </div>

      </div>

    </main>
    <!--End 页面主要内容-->
  </div>
</div>

<div th:insert="common/fragment::tail-script"></div>

<script type="text/javascript">
  $(function () {
    //动态选择框，上下级选中状态变化
    $('input.checkbox-parent').on('change', function () {
      let dataid = $(this).attr("dataid");
      $('input[dataid^=' + dataid + '-]').prop('checked', $(this).is(':checked'));

    });

    $('input.checkbox-child').on('change', function () {
      if (!$(this).hasClass('checkbox-parent')) {
        var dataid = $(this).attr("dataid");
        dataid = dataid.substring(0, dataid.lastIndexOf("-"));
        var parent = $('input[dataid=' + dataid + ']');
        if ($(this).is(':checked')) {
          parent.prop('checked', true);
          //循环到顶级
          while (dataid.lastIndexOf("-") != 2) {
            dataid = dataid.substring(0, dataid.lastIndexOf("-"));
            parent = $('input[dataid=' + dataid + ']');
            parent.prop('checked', true);
          }
        } else {
          //父级
          if ($('input[dataid^=' + dataid + '-]:checked').length == 0) {
            parent.prop('checked', false);
            //循环到顶级
            while (dataid.lastIndexOf("-") != 2) {
              dataid = dataid.substring(0, dataid.lastIndexOf("-"));
              parent = $('input[dataid=' + dataid + ']');
              if ($('input[dataid^=' + dataid + '-]:checked').length == 0) {
                parent.prop('checked', false);
              }
            }
          }
        }
      }

    });

    // 添加role按钮提交 - addrole.ajax
    $('#add-role-btn').on('click', function () {
      // 1 检查角色名
      let rolename = $('#add-new-rolename').val();
      let rolePOstatus = $('input[name=rolePOstatus]:checked').val()
      let comment = $('#role-comment').val()


      if (rolename == '') {
        confirmMsg('请填写角色名')
        return
      }
      // 生成data -- json
      let ary = []
      $('input.checkbox-child').each(function () {
        if ($(this).prop("checked")) {
          let obj = {}
          obj.id = $(this).val()
          ary.push(obj)
        }
      })

      let data = {
        name: rolename,
        authorities: ary,
        status: rolePOstatus,
        comment: comment
      }
      //   let data = $('#icon-form').serialize()
      post_ajax('/role/addrole.ajax', data, '/role/rolelist.do');

    });
  });
</script>
</body>
</html>